<script setup>

import {getJobByService, JobListService} from "@/api/job.js";
import {computed, ref} from 'vue';
import {useRoute, useRouter} from "vue-router";
import {Search, Location} from '@element-plus/icons-vue'
import {useUserInfoStore} from "@/stores/userInfo.js";
import {getUserInfoService} from "@/api/user.js";

const router = useRouter();
const route = useRoute();
const jobTitle = route.params.jobTitle === 'none' ? '' : route.params.jobTitle;
const location = route.params.location || '';

//获取用户信息
const userInfo = useUserInfoStore();
const userInfo2 = ref({});


async function getUserInfo(){
  let res = await getUserInfoService()
  userInfo.setUserInfo(res.data)
  userInfo2.value = res.data
}

getUserInfo();



const jobModal = ref([
    {
      jobId: '',
      name: '',
      companyName:'',
      salary: '',
      tags: '',
      location: '',
      hr:'',
      description: '',
      degree:'',
      experience:''
    },
])

const pageNum = ref(1)
const total = ref(20)
const pageSize = ref(3)
const flag = ref(false)

const selectedCity = ref('');
const selectedIndustry = ref('');


const searchForm = ref({
  jobTitle: jobTitle ? jobTitle : '',
  location: location ? location : '',
  pageNum: pageNum.value,
  pageSize: pageSize.value,
  city: selectedCity.value,
  industry: selectedIndustry.value,
});



const onSizeChange = (size) => {
  pageSize.value = size
  searchJobs()
}

const onCurrentChange = (num) => {
  pageNum.value = num;
  searchJobs()
}

const toggleCitySelection = (city) => {
  selectedCity.value = city.name;
  searchForm.value.city = city.name;
  searchJobs()
};

const toggleIndustrySelection = (industry) => {
  selectedIndustry.value = industry.name;
  searchForm.value.industry = industry.name;
  searchJobs()
};


//首页搜索
async function searchJobs(){
  searchForm.value.pageNum = pageNum.value;
  searchForm.value.pageSize = pageSize.value;
  let result = await getJobByService(searchForm.value);
  jobModal.value = result.data.item;
  total.value = result.data.total;
  flag.value = true
}

async function JobsPage(){
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value
  };
  let result = await JobListService(params);
  total.value = result.data.total;
  jobModal.value = result.data.item;
}

searchJobs();

function GOTOJobDetails(jobId){
  router.push(`/JobDetails/${jobId}`)
}



const labelList = [
  { name: '上海', category: 'city' },
  { name: '北京', category: 'city' },
  { name: '深圳', category: 'city' },
  { name: '南京', category: 'city' },
  { name: '3k以下', category: 'industry' },
  { name: '3-5k', category: 'industry' },
  { name: '5-10k', category: 'industry' },
  { name: '10-15k', category: 'industry' },
  { name: '15-20k', category: 'industry' },
  { name: '20k以上', category: 'industry' },
];

// 用来保存选中的标签
const selectedLabels = ref([]);

// 根据类别筛选出的城市和行业标签数组
const cityLabels = computed(() => labelList.filter(label => label.category === 'city'));
const industryLabels = computed(() => labelList.filter(label => label.category === 'industry'));

// 判断城市标签是否被选中
// const isSelectedCity = (city) => selectedLabels.value.some(label => label.name === city.name);
//
// // 切换城市标签的选中状态
// const toggleCitySelection = (city) => {
//   const isSelected = isSelectedCity(city);
//   if (isSelected) {
//     selectedLabels.value = selectedLabels.value.filter(label => label.name !== city.name);
//   } else {
//     selectedLabels.value.push({ name: city.name, category: 'city' });
//   }
// };
//
// // 判断行业标签是否被选中
// const isSelectedIndustry = (industry) => selectedLabels.value.some(label => label.name === industry.name);
//
// // 切换行业标签的选中状态
// const toggleIndustrySelection = (industry) => {
//   const isSelected = isSelectedIndustry(industry);
//   if (isSelected) {
//     selectedLabels.value = selectedLabels.value.filter(label => label.name !== industry.name);
//   } else {
//     selectedLabels.value.push({ name: industry.name, category: 'industry' });
//   }
// };


</script>

<template>
  <!-- Start Preloader Area -->
  <div class="preloader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- End Preloader Area -->

  <!-- Start Header Area -->
  <header class="header-area">
    <!-- Start Top Header -->
    <div class="top-header">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-6">
            <ul class="header-left-content">
              <li>
                <span>铸职</span>
                <a href="tel:+1-(514)-312-5678">智能求职平台</a>
              </li>
            </ul>
          </div>

          <div class="col-lg-6 col-md-6">
            <div class="header-right-content">
              <ul class="log-in" v-if="userInfo2.value === ''">
                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-lock"></i>
                    登录
                  </a>
                </li>

                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-user"></i>
                    注册
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Top Header -->

    <!-- Start Navbar Area -->
    <div class="navbar-area">
      <div class="mobile-nav">
        <div class="container">
          <div class="mobile-menu">
            <div class="logo">
              <a href="index.html">
                <img src="@/assets/images/logo.png" alt="logo">
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="desktop-nav">
        <div class="container">
          <nav class="navbar navbar-expand-md navbar-light">
            <a class="navbar-brand" href="index.html">
              <img src="@/assets/images/logo.png" alt="logo">
            </a>

            <div class="collapse navbar-collapse mean-menu">
              <ul class="navbar-nav m-auto">
                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/HomePage')">
                    首页
                  </a>

                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo2.status === 0" @click="router.push('/RecommendJobPage')">
                    工作推荐
                  </a>
                  <a href="" class="nav-link" v-if="userInfo2.status === 1" @click="router.push('/RecommendResumePage')">
                    简历推荐
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link active" @click="router.push('/JobList')">
                    搜索
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo2.status === 0" @click="router.push('/UserPersonalPage')">
                    个人页面
                  </a>
                  <a href="" class="nav-link" v-if="userInfo2.status === 1" @click="router.push('/CompanyPersonalPage')">
                    个人页面
                  </a>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link" @click="router.push('/test')">
                    分析
                  </a>
                </li>

              </ul>

              <div class="others-option">
                <div class="get-quote">
                  <a href="" class="default-btn" v-if="userInfo2.status === 0" @click="router.push('/UserPersonalPage')">
                    写简历
                  </a>
                  <a href="#" class="default-btn" v-if="userInfo2.status === 1" @click="router.push('/recruitTest')">
                    发布职位
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

      <div class="others-option-for-responsive">
        <div class="container">
          <div class="dot-menu">
            <div class="inner">
              <div class="circle circle-one"></div>
              <div class="circle circle-two"></div>
              <div class="circle circle-three"></div>
            </div>
          </div>

          <div class="container">
            <div class="option-inner">
              <div class="others-option justify-content-center d-flex align-items-center">
                <div class="get-quote">
                  <a href="post-job.html" class="default-btn">
                    写简历
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Navbar Area -->
  </header>
  <!-- End Header Area -->

  <!-- Start Page Title Area -->
  <div class="page-title-area">
    <div class="container">
      <div class="page-title-content">
        <h2>职位搜索</h2>
        <ul>
          <li>
            <a href="index.html">
              首页
            </a>
          </li>
          <li class="active">搜索</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- End Page Title Area -->

  <!-- Start Job Listing Area -->
  <section class="job-listing-area ptb-100">
    <div class="container">
      <div class="row">
        <div class="col-lg-8">

          <div class="search-job">
            <el-form :model="searchForm" class="form-login-signup">
              <el-row :gutter="20">
                <!-- 调整第一列和第二列共占12列中的20（即各自10列），剩余空间留给按钮 -->
                <el-col :span="8">
                  <el-form-item prop="jobTitle" class="input-with-icon">
                    <el-input
                        v-model="searchForm.jobTitle"
                        placeholder="搜索岗位"
                        :prefix-icon="Search"
                        size="large"
                        class="custom-input"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="location" class="input-with-icon">
                    <el-input
                        v-model="searchForm.location"
                        placeholder="搜索城市"
                        :prefix-icon="Location"
                        class="custom-input"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!-- 按钮自动填充剩余空间 -->
                <el-col :span="4">
                  <el-button
                      @click="searchJobs"
                      type="primary"
                      class="btn-search"
                  >
                    <i class="bx bx-search"></i>
                    找工作
                  </el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>


          <div v-for="(job, index) in jobModal" :key="index" class="hot-jobs-list">
            <div class="row align-items-center">
              <div class="col-lg-2">
              </div>

              <div class="col-lg-6">
                <div class="hot-jobs-content">
                  <h3>
                    <a :href="'job-details.html#' + job.jobId">{{ job.name }}</a>
                  </h3>
                  <span class="sub-title">{{ job.companyName }}</span>
                  <ul>
                    <li><span>学历要求：</span> {{ job.degree }}</li>
                    <li><span>经验要求：</span> {{ job.experience }}</li>
                    <li><span>地址: </span> {{ job.location }}</li>
                  </ul>
                </div>
              </div>

              <div class="col-lg-4">
                <div class="hot-jobs-btn">
                  <a href="" @click="GOTOJobDetails(job.jobId)" class="default-btn">查看详情</a>
                </div>
              </div>
              <span class="featured">{{ job.salary }}</span>
            </div>
          </div>

          <el-pagination
              v-model:current-page="pageNum"
              v-model:page-size="pageSize"
              :page-sizes="[3, 5, 10, 15]"
              layout="jumper, total, sizes, prev, pager, next"
              background
              :total="total"
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
              style="margin-top: 20px;

              justify-content: flex-end" />

        </div>

        <div class="col-lg-4">
          <div class="job-listing-sidebar">

            <div class="job-listing-widget">
              <ul class="accordion-widget">
                <li class="accordion-item">
                  <a class="accordion-widget-title active" href="javascript:void(0)">
                    <h3>城市筛选</h3>
                    <i class="bx bx-chevron-down"></i>
                  </a>

                  <div class="label-group">
                    <span
                        v-for="(label, index) in cityLabels"
                        :key="index"
                        :class="[{ active: selectedCity === label.name }, 'city']"
                        @click="toggleCitySelection(label)"
                    >
                      {{ label.name }}
                    </span>
                  </div>
                </li>
              </ul>
            </div>

            <div class="job-listing-widget">
              <ul class="accordion-widget">
                <li class="accordion-item">
                  <a class="accordion-widget-title active" href="javascript:void(0)">
                    <h3>薪资筛选</h3>
                    <i class="bx bx-chevron-down"></i>
                  </a>
                  <div class="label-group">
                    <span
                        v-for="(label, index) in industryLabels"
                        :key="index"
                        :class="[{ active: selectedIndustry === label.name }, 'industry']"
                        @click="toggleIndustrySelection(label)"
                    >
                      {{ label.name }}
                    </span>
                  </div>

                </li>
              </ul>
            </div>

          </div>
        </div>


      </div>
    </div>
  </section>
  <!-- End Job Listing Area -->

  <!-- Start Subscribe Area -->
  <section class="subscribe-area">
    <div class="container">
      <div class="subscribe-bg">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="subscribe-content">
              <h2>找事儿，一期搞定</h2>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- End Subscribe Area -->

  <!-- Start Footer Area -->
  <footer class="footer-area pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget single-bg">
            <a href="index.html" class="logo">
              <img src="@/assets/images/logo.png" alt="Image">
            </a>

            <p>铸职智能求职系统，是一个创新的在线招聘平台，旨在重塑求职者的探索旅程与企业的招聘体验。我们融合了先进的数据分析技术、人工智能算法与用户至上的设计理念，为求职者打造个性化、高效的职业匹配通道，同时为企业提供精准的人才筛选与招聘解决方案。</p>

          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>联系方式</h3>

            <ul class="address">
              <li>
                <i class="bx bx-phone-call"></i>
                <span>联系电话:</span>
                <a href="tel:+1-(514)-7939-357">+1 (514) 7939-357</a>
              </li>
              <li>
                <i class="bx bx-envelope"></i>
                <span>邮箱:</span>
                <a href="mailto:hello@jubi.com">hello@jubi.com</a>
              </li>
              <li class="location">
                <i class="bx bx-location-plus"></i>
                <span>地址:</span>
                江西省南昌市南昌航空大学
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>帮助</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Contact Us</a>
              </li>
              <li>
                <a href="#">Site Map</a>
              </li>
              <li>
                <a href="#">Terms of Use</a>
              </li>
              <li>
                <a href="#">Privacy Centre</a>
              </li>
              <li>
                <a href="#">Blog</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>猎头</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Browse Jobs</a>
              </li>
              <li>
                <a href="#">Upload CV</a>
              </li>
              <li>
                <a href="#">Company Profile</a>
              </li>
              <li>
                <a href="#">International Jobs</a>
              </li>
              <li>
                <a href="#">FAQ</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Footer Area -->

  <!-- Start Copy Right Area -->
  <div class="copy-right-area">
    <div class="container">
      <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
    </div>
  </div>
  <!-- End Copy Right Area -->

  <!-- Start Go Top Area -->
  <div class="go-top">
    <i class="bx bx-chevrons-up"></i>
    <i class="bx bx-chevrons-up"></i>
  </div>
  <!-- End Go Top Area -->
</template>

<style scoped>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";

.custom-input {
  width: 95% !important; /* 使用!important覆盖可能的内联样式 */
  height: 36px;
}

.btn-search {
  border-radius: 20px; /* 圆角 */
  background-color: #2041e1; /* 蓝色背景 */
  color: white; /* 文本白色 */
  padding: 8px 16px; /* 内边距，可以根据需要调整 */
  font-size: 14px; /* 字体大小 */
  border: none; /* 移除默认边框 */
  cursor: pointer; /* 鼠标悬停时指针变为手型 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

/* 鼠标悬停时的样式变化 */
.btn-search:hover {
  background-color: rgba(32, 65, 225, 0.78); /* 更深的蓝色背景，增加深度感 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* 点击时的样式变化（可选） */
.btn-search:active {
  transform: scale(0.98); /* 稍微缩小，模拟按下效果 */
  box-shadow: none; /* 移除阴影，让按钮看起来更扁平 */
}



/* 基础标签样式 */
.label-group {
  margin-top: 10px;
}
.label-group span {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 4px;
  margin-right: 0.5em;
  cursor: pointer;
  transition: background-color 0.3s; /* 平滑的颜色过渡效果 */
  margin-bottom: 5px;
}

/* 未选中时的基础样式 */
.label-group span:not(.active) {
  background-color: rgba(0, 0, 0, 0.1); /* 可以根据需要调整颜色 */
  color: #333;
}

/* 选中时的样式 */
.label-group span.active {
  background-color: blue;
  color: white;
}

</style>